<html>
    <head>
    	<meta charset="utf-8">
    	<title>变</title>
    	<style type="text/css">
	    	#box{width: 600px;border:1px solid #f65;margin: 0 auto;margin-top: 10px; height: 400px;}
	    	
	    	#box .sbox{width: 100px; height: 100px;background-color: #666;}
    	</style>
    </head>
    <body>
    	<div id="box">
    		<input type="button" value="变宽" onclick="changewidth()">
    		<input type="button" value="变高" onclick="changeheight()">
    		<input type="button" value="变色" onclick="changecolor()">
    		<input type="button" value="隐藏" onclick="changehide()">
    		<input type="button" value="重置" onclick="changeCZ()">
    		<div class="sbox"></div>
    	</div>
    </body>
    <script type="text/javascript">
        function changewidth () {
        	var osbox=document.getElementsByClassName('sbox');
        	osbox[0].style.width="200";
        }
        function changeheight () {
        	var osbox=document.getElementsByClassName('sbox');
        	osbox[0].style.height="200";
        }
        function changecolor () {
        	var osbox=document.getElementsByClassName('sbox');
        	osbox[0].style.backgroudColor="#666";
        }
        function changehide () {
        	var osbox=document.getElementsByClassName('sbox');
        	osbox[0].style.display="none";
        }
        function changeCZ () {
        	var osbox=document.getElementsByClassName('sbox');
        	osbox[0].style.cssText="";
        }
    </script>
</html>